<template>
  <div>
    <div class="card" style="margin-bottom: 10px;">
      日志类别：
      <el-select v-model="data.logtype" style="width: 140px; margin-right: 10px" placeholder="请选择状态">
        <el-option label="正常日志" value="0"></el-option>
        <el-option label="异常日志" value="1"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px;" @click="load">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div class="card">
      <div style="margin-bottom: 10px;">
        <el-table :data="data.tableData">
          <el-table-column v-if="false" label="ID" prop="id" width="70"></el-table-column>
          <el-table-column label="微信ID" prop="nowuser"></el-table-column>
          <el-table-column label="日志类型" prop="logtype">
            <template #default="scope">
              <el-tag v-if="scope.row.logtype == 0" type="success" effect="dark">正常</el-tag>
              <el-tag v-if="scope.row.logtype == 1" type="warning" effect="dark">异常</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createtime"></el-table-column>
          <el-table-column label="方法名字" prop="methodname"></el-table-column>
          <el-table-column label="方法描述" prop="logdescription"></el-table-column>
          <el-table-column label="返回值类型" prop="methodtype"></el-table-column>
<!--          <el-table-column label="返回值信息" prop="methodteturn"></el-table-column>-->
          <el-table-column label="异常信息" prop="exmessage"></el-table-column>
          <el-table-column label="操作" align="center" width="160">
            <template #default="scope">
              <el-button type="danger" size="small" @click="handleDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="card">
        <el-pagination background layout="prev, pager,next" @current-change="handelCurrentChange"
                       v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" :total="data.total"/>
      </div>
    </div>
  </div>
</template>


<script setup>
import {reactive, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  logtype: "0",
  tableData: [],
  pageNum: 1, //当前页码
  pageSize: 8, //每页个数
  total: 0,
  categoryList: [],  // 新增：存储类目列表
  formVisible: false //新增框不显示
})

const formRef = ref()

const rules = reactive({
  logtype: [
    {required: true, message: '请输入日志类别', trigger: 'blur'}
  ]
})


//请求数据
const load = () => {
  request.get("/sell/buyer/systemlog/selectPage", {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      logtype: data.logtype
    }
  }).then(res => {
    //console.log("分页数据:" + JSON.stringify(res));
    data.tableData = res.data?.list || [];
    data.total = res.data?.total || 0;
  })
}

//翻页
const handelCurrentChange = (pageNum) => {
  // 当翻页的时候重新加载数据即可
  load()
}

//点击删除
const handleDel = (id) => {
  ElMessageBox.confirm('日志删除数据后无法恢复，您确认删除吗？', '删除确认', {type: 'warning'}).then(res => {
    request.delete('/sell/buyer/systemlog/delete/' + id).then(res => {
      if (res.code === '200') {
        load()    // 重新获取数据
        ElMessage.success("操作成功")
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(res => {
  })
}


//重置
const reset = () => {
  data.logtype = "0"
  load()
}
// 调用方法获取后台数据
load();

</script>